<script setup lang='ts'>
import { ref } from 'vue'

const tag = ref(0)
</script>

<template>
 <view class="tag">
   <view :class="['tag-item', tag === 0 && 'active']" @click="tag = 0">结算查询</view>
   <view :class="['tag-item', tag === 1 && 'active']" @click="tag = 1">订单查询</view>
 </view>
  <view v-if="tag === 0">
    <view class="form">
      <view class="form-item">
        <span class="label">人员</span>
        <view class="arrow">
          <span>全部</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
      <view class="form-item">
        <span class="label">起始时间</span>
        <view class="arrow">
          <span>2023/04/28</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
      <view class="form-item">
        <span class="label">结束时间</span>
        <view class="arrow">
          <span>2023/04/28</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
    </view>
    <view class="tip">
      收益合计：1283.00元
    </view>
    <view class="list">
      <view class="item">
        <view class="left">
          <h3>分账人员：夜阑静我未眠</h3>
          <p>2024-06-26 09:30</p>
        </view>
        <view class="right yellow">+ 16.00元</view>
      </view>
      <view class="item">
        <view class="left">
          <h3>分账人员：夜阑静我未眠</h3>
          <p>2024-06-26 09:30</p>
        </view>
        <view class="right yellow">+ 16.00元</view>
      </view>
    </view>
  </view>
  <view v-if="tag === 1">
    <view class="nav">
      <view class="search">
        <view class="input" style="width: 100%">
          <image mode="widthFix" class="icon" src="/static/image/navbar/search.png"/>
          <input placeholder="请输入商户名称" />
        </view>
      </view>
    </view>
    <view class="form">
      <view class="form-item">
        <span class="label">人员</span>
        <view class="arrow">
          <span>全部</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
      <view class="form-item">
        <span class="label">起始时间</span>
        <view class="arrow">
          <span>2023/04/28</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
      <view class="form-item">
        <span class="label">结束时间</span>
        <view class="arrow">
          <span>2023/04/28</span>
          <image src="/static/image/form/right_arrow.png" mode="widthFix" />
        </view>
      </view>
    </view>
    <view class="tip">
      收益合计：1283.00元
    </view>
    <view class="cards">
      <view class="list order">
        <view class="item">
          <view class="left">
            分账日期
          </view>
          <view class="right">2024-06-26 09:30</view>
        </view>
        <view class="item">
          <view class="left">
            订单号
          </view>
          <view class="right">273764537846279222236</view>
        </view>
        <view class="item">
          <view class="left">
            订单金额
          </view>
          <view class="right">18.00元</view>
        </view>
        <view class="item">
          <view class="left">
            分账人员
          </view>
          <view class="right yellow">夜阑静(18.00元)</view>
        </view>
      </view>
      <view class="list order">
        <view class="item">
          <view class="left">
            分账日期
          </view>
          <view class="right">2024-06-26 09:30</view>
        </view>
        <view class="item">
          <view class="left">
            订单号
          </view>
          <view class="right">273764537846279222236</view>
        </view>
        <view class="item">
          <view class="left">
            订单金额
          </view>
          <view class="right">18.00元</view>
        </view>
        <view class="item">
          <view class="left">
            分账人员
          </view>
          <view class="right yellow">夜阑静(18.00元)</view>
        </view>
      </view>
    </view>

  </view>
</template>

<style scoped lang='scss'>
.tip {
  text-align: right;
}
.list {
  margin-top: 32rpx;
  background: #fff;
  &.order {
    padding: 32rpx 32rpx;
    .item {
      border-bottom: none!important;
      padding: 0 !important;
      margin-bottom: 24rpx;
      &:not(:last-child) {
        margin-bottom: 32rpx;
      }
    }
  }
  .item {
    padding: 24rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #303030;
    &:not(:last-child) {
      border-bottom: #EBEEF1 solid 1rpx;
    }
    h3 {
      font-size: 28rpx;
      color: #3B3D3D;
      margin-bottom: 8rpx;
    }
    p {
      font-size: 24rpx;
      color: #B6BDBD;
    }
    .right {
      font-size: 28rpx;
      &.yellow {
        color: #FF4638;
      }
    }
  }
}
.nav {
  background: #f8f9fb;
  padding: 16rpx 32rpx;
}
</style>